<template>
	<view class="index-page">
		<view :style="{ height: navBarHeight + 'px', background: '#fff' }"></view>
		<auth-modal :show="showLoginModal" @close="hideModal" @success="surcessModal" />
		<scroll-view
			scroll-y
			class="main-scroll"
			style="height: 100vh;"
			@scroll="handleScroll"
			>
			<view class="index-title">
				<image
					class="index-img"
					src="/static/ai.png"
					mode="cover"
				/>
				<view class="index-title-text">
					<view class="index-title-text-title">
						<text>累计估杆</text>
						<text class="num">{{ nums.toLocaleString() }}</text>
					</view>
					<view class="index-title-ai">
						通过DeepSeek大模型免费识别并评估球杆
					</view>
					<view class="index-line"></view>
					<view class="index-title-ai2">
						球杆信息 > 上传图片 > 开始识杆 > 获取结果
					</view>
					<view class="index-title-btn-wrap">
						<button  class="index-title-btn" type="primary" clickable @click="goUrl">开始估杆</button>
					</view>
				</view>
				
			</view>
			<view class="index-context">
				<view class="index-context-flex">
					<view>估杆广场</view>
					<view class="index-context-name">
						<view class="scroll-wrapper">
							<view class="scroll-content" :style="{ transform: `translateY(-${currentIndex * 17}px)`, transition: 'transform 0.5s' }">
								<view class="scroll-item" v-for="(item, index) in dataList" :key="index">
									<image
										:src="item.avatarUrl"
										mode="scaleToFill"
										class="content-img"
									/>
									{{ item.nickName }} {{item.timeAgo}}获得估杆结果
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				<view class="index-line2"></view>
				<view v-if="itemList.length > 0">
					<scroll-view
						scroll-y
						class="tab-scroll"
						show-scrollbar="false"
						:style="{ height: scrollHeight + 'px' }"
						@scrolltolower="loadMore"
						>
						<uni-list>
							<uni-list-item
								v-for="(item, index) in itemList"
								:key="index" 
								clickable 
							>
								<template v-slot:body>
									<view class="flex">
										<image class="list-img" :src="item.coverUrl" mode="scaleToFill" />
										<view>
											<view class="index-context-title">{{ item.cueName }}</view>
											<view class="index-context-title2">{{ item.brandName }}</view>
											<view class="index-context-name">
											<image
												:src="item.avatarUrl"
												mode="scaleToFill"
												class="content-img"
											/>
											{{ item.nickName }}
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
						<view class="loading-text" v-if="loading">
							<text>加载中...</text>
						</view>
						<view class="loading-text" v-if="noMore">
							<text>没有更多了</text>
						</view>
					</scroll-view>
					
				</view>
				<view class="scroll-content" v-else>
					<image
						class="notData-img"
						src="/static/notData.jpg"
						mode="scaleToFill"
					/>
					暂无数据
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
	import { ref, onMounted, onUnmounted } from 'vue'
	import { request } from '../utils/request'
	const itemList = ref([])
	const scrollHeight = ref(0)
	const loading = ref(false)
	const noMore = ref(false)
	const page = ref(1)
	const pageSize = ref(10)
	const nums = ref(0) //累计估杆数
	let timer = null
	const currentIndex = ref(0)
	const dataList = ref([])
	const showLoginModal = ref(false)
	const showNavbar = ref(false)
	const navBarHeight = ref(0)
	const loadMore = () => {
		console.log(111, 'loadMore')
		fetchList()
	}
	const getNavHeight = () => {
		const systemInfo = uni.getSystemInfoSync()
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// 状态栏高度
		const statusBarHeight = systemInfo.statusBarHeight || 20
		// 胶囊按钮高度
		const capsuleHeight = menuButtonInfo.height || 32
		// 胶囊与状态栏的间距
		const topGap = menuButtonInfo.top - statusBarHeight
		// 整个自定义导航栏高度
		navBarHeight.value = (statusBarHeight + capsuleHeight + topGap * 2) - 44
	}
	const handleScroll = (e) => {
		const scrollTop = e.detail.scrollTop
		console.log('滚动高度:', scrollTop)
		showNavbar.value = scrollTop > 37
	}
	
	const fetchList = async () => {
		if(loading.value || noMore.value) return;
		try {
			loading.value = true;
			const res = await request({
				url: '/assess/list/page',
				method: 'GET',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: {
					current: page.value,
					size: pageSize.value
				}
			})
			if(res.code === 200) {
				const newItems = res.data.records.map(item => ({
					cueName: item.cueName,
					brandName: item.brandName,
					nickName: item.nickName,
					avatarUrl: item.avatarUrl,
					coverUrl: item.coverUrl
				}))
				itemList.value = [...itemList.value, ...newItems]
				page.value = res.data.current
				if ((page.value * pageSize.value) >= res.data.total) {
					noMore.value = true
				} else {
					page.value++ // 下一次加载下一页
				}
				loading.value = false
			}else{
				uni.showToast({
					title: res.data.message || '提交失败',
					icon: 'none',
					duration: 3000
				})
			}

			// const newItems = Array.from({ length: pageSize.value }, (_, i) => ({
			// 	name: `球杆名称 ${i + 1 + (page.value - 1) * pageSize}`,
			// 	brand: `品牌 ${i + 1}`,
			// 	user: '张三',
			// 	image: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
			// }))
			// 模拟没有更多数据
			// if (page.value >= 3) {
			// 	noMore.value = true
			// } else {
			// 	page.value++
			// }
			// console.log(111122, newItems)
			// itemList.value = [...itemList.value, ...newItems]
			// loading.value = false
		}catch (err) {
		    console.error('请求失败:', err)
		} finally {
		    loading.value = false
		}
		
	}

	const goUrl = () => {
		const token = uni.getStorageSync('token');
		if (!token) {
			showLoginModal.value = true
		} else {
			uni.navigateTo({
				url: '/pages/index/project'
			})
		}	
	}
	const hideModal = () => {
		showLoginModal.value = false
	}
	const surcessModal = () => {
		showLoginModal.value = false
		// setTimeout(() => {
		// 	const userInfos = uni.getStorageSync('userInfo')
			// if(userInfos) {
				// uni.navigateTo({
				// 	url: '/pages/index/form'
				// })
			// }
		// }, 500)
	}
	const getNum = async () => {
		const res = await request({
			url: '/assess/qty',
			method: 'GET',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {},
		})
		if(res.code === 200) {
			nums.value = res.data
		}else{
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
		}
	}
	const getUserList = async () => {
		dataList.value = []
		const res = await request({
			url: '/assess/roll/user',
			method: 'GET',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {},
		})
		if(res.code !== 200) {
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
			return;
		}
		res.data.forEach(item => {
			dataList.value.push(item)
		})
		if (dataList.value.length === 0) return;
		timer = setInterval(() => {
			currentIndex.value = (currentIndex.value + 1) % dataList.value.length;
		}, 3000)
	}
	onMounted(() => {
		getNavHeight()
		getNum()
		getUserList()
		fetchList()
		setTimeout(() => {
			const systemInfo = uni.getSystemInfoSync()
			scrollHeight.value = systemInfo.windowHeight - 300
		}, 400)
	})
	onUnmounted(() => {
		clearInterval(timer)
	})
</script>

<style scoped>
	.flex{
		display: flex;
		align-items: center;
	}
	.index-page {
		padding: 0 20rpx;
		height: 100vh;
		background-color: #f5f5f5;
	}
	.index-img {
		width: 210rpx;
    	height: 47rpx;
		margin: 30rpx 0 10rpx 20rpx;
	}
	.index-title{
		background-color: #fff;
		height: 600rpx;
	}
	.index-title-text{
		text-align: center;
		
	}
	.index-title-text-title{
		font-size: 39rpx;
		font-weight: 500;
		margin: 60rpx 0;
	}
	.index-title-text-title .num{
		color: #2b65f6;	
		margin-left: 10rpx;
	}
	.index-title-ai{
		font-size: 28rpx;
		color: #888888;
		margin-bottom: 40rpx;
	}
	.index-title-ai2{
		font-size: 22rpx;
		color: #888888;
		margin-bottom: 40rpx;
	}
	.index-title-btn-wrap {
		height: 100rpx;
		margin: 40rpx 0;
		z-index: 99;
	}
	.index-title-btn{
		background: linear-gradient(to right, #45b5ff, #2b65f6);
		color: #fff;
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		width: 200px;
	}
	.index-line{
		height: 1px;
		background-color: #f1f1f1;
		width: 80%;
		margin: 20rpx auto;
	}
	.index-line2{
		/* height: 1px; */
		background-color: #ccc;
		width: 100%;
		margin: 20rpx auto;
	}

	.index-context{
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.index-context-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.index-context-title{
		font-size: 30rpx;
		color: #333;
		margin-bottom: 5rpx;
	}
	.index-context-title2{
		font-size: 22rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	.index-context-name{
		font-size: 22rpx;
		color: #888888;
		display: flex;
		align-items: center;
	}
	.content-img{
		height: 22rpx;
		width: 22rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.list-img{
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}
	.loading-text {
		text-align: center;
		color: #888;
		padding: 20rpx 0;
		font-size: 26rpx;
	}
	.scroll-wrapper {
		height: 17px;
		line-height: 17px;
		overflow: hidden;
	}
	.scroll-content {
		display: flex;
		flex-direction: column;
	}
	.scroll-item {
		display: flex;
		align-items: center;
		height: 17px;
		line-height: 17px;
		font-size: 24rpx;
		color: #666;
	}
	.content-img {
		height: 32rpx;
		width: 32rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.scroll-content{
		height: 590rpx;
		text-align: center;
		color: #666;
	}
	.notData-img{
		margin: 0 auto;
		width: 100%;
	}
	.tab-scroll{
		-ms-overflow-style: none; /* IE 和 Edge */
  		scrollbar-width: none; 
	}
	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
	}
	.navbar-visible {
		transform: translateY(100%);
	}
</style>
